<template>
  <div class="page-login-zyl">
    <!-- 首页头部 -->
    <div class="page-login-header">
      <div class="login-header-center">
        <div class="header-center-left">
          <img class="page-login--logo" src="~@/assets/image/login/logo.png" />
          <span>企业网银</span>
        </div>
        <div class="header-center-right">
          <div>
            <img src="~@/assets/image/login/portal.png" alt />
            <ui-link :underline="false">门户网站</ui-link>
          </div>
          <div v-popover:popover class="item btn-text can-hover">
            <img src="~@/assets/image/login/portal.png" alt />
            <ui-link :underline="true">APP下载</ui-link>
          </div>
          <div>
            <img src="~@/assets/image/login/oac.png" alt />
            <ui-link :underline="false">企业开户</ui-link>
          </div>
        </div>
      </div>
    </div>
    <!-- 首页主体 -->
    <div class="page-login-body">
      <div class="login-body-center">
        <div class="body-center-left">
          <div class="large">高效智能 轻量办公</div>
          <div class="intro">实现高速办公效率</div>
          <div class="intro">打造全新企业网银模式</div>
        </div>
        <div class="body-center-right">
          <div class="login-box">
            <div class="title">企业网银登录</div>
            <div class="titletype">U盾登录</div>

            <div class="no-down" v-if="!isDown">
              <div class="nocontrol">
                <div class="warn flex-center">
                  <img src="~@/assets/image/common/warning.png" alt />
                  <span>
                    需先
                    <a href style="text-decoration: revert">下载密码控件</a>
                  </span>
                </div>
                <p>如您已下载密码控件，点击下方刷新按钮进行刷新</p>
                <div class="ref">
                  <img :src="require(`@/assets/image/theme/${activeName}/ref.png`)" alt class="ref" />
                </div>
              </div>
              <a href class="havedown" style="text-decoration: revert">已下载无法登录？</a>
            </div>

            <div class="u-shield" v-if="!shield && isDown">
              <div class="tips">请插入u盾</div>
              <div class="shieldimg">
                <img src="~@/assets/image/login/shield.png" alt />
              </div>
              <div class="ref flex-center">
                <span>插入U盾后点击刷新</span>
                <img :src="require(`@/assets/image/theme/${activeName}/ref.png`)" alt @click="Refresh" class="ref" />
              </div>
            </div>
            <ui-form :model="formLogin" ref="formLogin" :rules="rules" class="login" v-if="shield && isDown">
              <div class="userinfo">客户编号：{{ formLogin.userCode }}</div>
              <div class="userinfo">用户ID：{{ formLogin.userID }}</div>
              <div class="line"></div>
              <div class="infoEnter">
                <img src="~@/assets/image/login/pwd.png" class="pwd" alt />
                <ui-form-item :error="pwdErrorR">
                  <pwd class="border-none" :pwdHtml="pwdObj[0].pwdHtml"></pwd>
                  <!-- <ui-input v-model="formLogin.password" maxlength="16" placeholder="请输入登录密码" type="password"></ui-input> -->
                </ui-form-item>
              </div>
              <div class="line"></div>
              <div class="infoEnter">
                <img src="~@/assets/image/login/idfCode.png" alt />
                <ui-form-item prop="idfCode">
                  <ui-input v-model="formLogin.idfCode" maxlength="6" placeholder="请输入验证码" class="idfcode"></ui-input>
                </ui-form-item>
                <img src="@/assets/image/login/authCode.png" class="code-img" />
              </div>
              <div class="line"></div>
              <ui-button class="loginbtn" @click="submit('formLogin')">立即登录</ui-button>
            </ui-form>
          </div>
        </div>
      </div>
      <div class="login-body-btns"></div>
      <div class="btn-center">
        <div class="border"></div>
        <div class="bottom-btn cursor-pointer" @click="demonstration">
          <img src="~@/assets/image/login/bFunc.png" alt />
          <span>功能演示</span>
        </div>
        <div class="border"></div>

        <div class="bottom-btn cursor-pointer">
          <img src="~@/assets/image/login/bBank.png" alt />
          <span>网银助手</span>
        </div>
        <div class="border"></div>

        <div @click="goToDownloadCentre" class="bottom-btn">
          <img src="~@/assets/image/login/bDown.png" alt />
          <span>下载中心</span>
        </div>
        <div class="border"></div>

        <div class="bottom-btn cursor-pointer" @click="receiptVerify">
          <img src="~@/assets/image/login/bReceipt.png" alt />
          <span>回单校验</span>
        </div>
        <div class="border"></div>
      </div>
    </div>
    <!--      介绍开始-->
    <div class="introduction">
      <div class="intro-down">
        <div class="intro-down-left">
          <img src="~@/assets/image/login/onLineBank.png" alt />
          <div class="down-title">
            <span>企业网银</span>
            <p>为企业定制全方面金融服务</p>
            <div class="flex-center">
              了解更多
              <img src="~@/assets/image/login/jump.png" alt />
            </div>
          </div>
        </div>
        <div class="intro-down-right">
          <img src="~@/assets/image/login/mobileBank.png" alt />
          <div class="down-title">
            <span>手机银行</span>
            <p>下载APP纵享指尖上的金融服务</p>
            <div class="flex-center">
              立即下载
              <img src="~@/assets/image/login/down.png" alt />
            </div>
          </div>
        </div>
      </div>

      <!-- 高收益 企业理财服务 -->
      <ui-enterprise-financing />

      <!--    阴影文字-->
      <div class="shoadow-text  ">
        <div class="text">
          <div class="top">快速高效&nbsp;企业融资</div>
          <div class="bottom">ENTERPRISEFINANCING</div>
        </div>
        <div class="shoadow">
          <div></div>
          <span>您的信赖首选</span>
          <div class="last"></div>
        </div>
      </div>

      <!--  中间三个介绍-->

      <div class="centerbg">
        <div class="bg bg1">
          <div class="title">动产融资</div>
          <div class="title-c">金融科技助力企业发展</div>
          <div class="logoclass">
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cLeft1.png" alt />
              <span>质押品类多</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cLeft2.png" alt />
              <span>最高3000万</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cLeft3.png" alt />
              <span>低至0.033%</span>
            </div>
          </div>
        </div>
        <div class="bg bg2">
          <div class="title">信用贷</div>
          <div class="title-c">您的贷款首选产品</div>
          <div class="logoclass">
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cMiddle1.png" alt />
              <span>一秒放款</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cMiddle2.png" alt />
              <span>无需抵押</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cMiddle3.png" alt />
              <span>随借随还</span>
            </div>
          </div>
        </div>
        <div class="bg bg3">
          <div class="title">票据融资</div>
          <div class="title-c">纵享指尖上的金融服务</div>
          <div class="logoclass">
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cRight1.png" alt />
              <span>在线开通</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cRight2.png" alt />
              <span>不跑银行</span>
            </div>
            <div class="logoclass-child">
              <img src="~@/assets/image/login/cRight3.png" alt />
              <span>秒速到账</span>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!--  开户介绍-->
    <div class="openAc">
      <div class="bg">
        <div class="tel">
          <div class="flone">用户服务专家答复您的每个疑问</div>
          <div class="fltwo">CUSTOMER SERVICE TELEPHONE</div>
          <div class="fltwo">NUMBERS</div>
          <div class="flthree flex-center">
            <img :src="require(`@/assets/image/theme/${activeName}/telLogo.png`)" alt />
            <span>400-666-8888</span>
          </div>
        </div>
        <div class="openstep">
          <div class="title">开启您的企业网银新旅程</div>
          <div class="cir-p">
            <div class="Semicircle">
              <div class="circular flex-center">
                <div class="center">
                  <div>开户流程</div>
                  <div>仅需5步、简单快捷</div>
                </div>
              </div>
            </div>
            <div class="step step1 flex-center">
              <span>审核资料</span>
              <img :src="require(`@/assets/image/theme/${activeName}/01.png`)" alt />
            </div>
            <div class="step step2 flex-center">
              <span>填写资料</span>
              <img :src="require(`@/assets/image/theme/${activeName}/02.png`)" alt />
            </div>

            <div class="step step3 flex-center">
              <span>信息采集</span>
              <img :src="require(`@/assets/image/theme/${activeName}/03.png`)" alt />
            </div>
            <div class="step step4 flex-center">
              <img :src="require(`@/assets/image/theme/${activeName}/04.png`)" alt />
              <span>信息审核</span>
            </div>
            <div class="step step5 flex-center">
              <img :src="require(`@/assets/image/theme/${activeName}/05.png`)" alt />
              <div class="step-box">
                <div>开立账户</div>
                <div>企业网银</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 首页底部 -->
    <bottom-bar></bottom-bar>
    <!-- <div class="foot">
      <div class="foot-wrap">
        <div class="foot-child foot-child1">
          <img src="~@/assets/image/login/footLogo.png" alt />
          <div class="us">
            <div>关于我们</div>
            <div>网站声明</div>
            <div>隐私政策</div>
            <div>网站导航</div>
          </div>
          <p>数字银行版权所有 互联网服务信息备案编号 ICP备120047678号</p>
        </div>
        <div class="foot-child2">
          <div class="foot-child">
            <img src="~@/assets/image/login/footTel.png" alt />
            <div>客服及投诉电话</div>
            <div>400-666-1688</div>
          </div>
          <div class="foot-child">
            <img src="~@/assets/image/login/footTime.png" alt />
            <div>服务时间</div>
            <div>周一至周五 09:00～17:00</div>
          </div>
        </div>
        <div class="foot-child3">
          <div class="foot-child last">
            <img src="~@/assets/image/login/focus.png" alt />
            <div>关注公众号</div>
          </div>
          <div class="foot-child last">
            <img src="~@/assets/image/login/focus.png" alt />
            <div>手机端下载</div>
          </div>
        </div>
      </div>
    </div> -->
    <!-- 气泡弹框 -->
    <ui-popover ref="popover" placement="bottom-start" trigger="hover">
      <div id="qrcode" ref="qrcode"></div>
    </ui-popover>
    <!-- 验证ukey密码弹窗 -->
    <ui-dialog title="ukey密码验证" center :visible.sync="isShowUkeyDialog" width="600px" class="ukeyDialog">
      <ui-input v-model="ukeyValue" type="password" placeholder="请输入ukey密码"></ui-input>
      <span slot="footer" class="dialog-footer">
        <ui-button class="primary-long-btn" @click="verification" :loading="isLoading">确定</ui-button>
        <ui-button class="default-btn" @click="isShowUkeyDialog = false">取消</ui-button>
      </span>
    </ui-dialog>
  </div>
</template>

<script>
import Pwd from '@/components/vx-pwd';
import dayjs from 'dayjs';
import { mapGetters, mapActions, mapState } from 'vuex';
import { judgeOneEnv, verifyPIN, usbKeySignData } from '@/utils/ukey.js';
// import QRCode from 'qrcodejs2';
import UiEnterpriseFinancing from './components/ui-enterprise-financing';
import loginInfoApi from '@/api/companyLogin.js';
import bottomBar from '@/layout/header-aside/components/bottom-bar';
export default {
  components: {
    UiEnterpriseFinancing,
    bottomBar,
    Pwd,
  },
  data() {
    return {
      timeInterval: null,
      time: dayjs().format('HH:mm:ss'),
      isDown: true, // 是否下载了密码控件
      shield: true, // 是否插入u盾
      isShowUkeyDialog: false, // 验证ukey密码弹窗
      ukeyValue: '', // ukey密码
      pwdErrorR: '', //密码控件报错信息
      isLoading: false,
      imgSrc: '',
      // 快速选择用户
      dialogVisible: false,
      pwdObj: [
        {
          width: 280,
          init: true,
          minLength: 6,
          maxLength: 6,
          // accepts: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$/,
          id: 'loginPasswordR',
          placeholder: '请输入登录密码',
        },
      ],
      // 表单
      formLogin: {
        username: 'admin',
        UserId: 'admin',
        userCode: '1234', // 客户编号
        userID: 'admin', // 客户ID
        idfCode: '', // 验证码
      },
      // 校验
      rules: {
        // username: [
        //   { required: true, message: '请输入客户编号', trigger: 'blur' }
        // ],
        idfCode: [{ required: true, message: '请输入验证码', trigger: 'blur' }],
      },
    };
  },
  computed: {
    ...mapGetters('vxadmin', {
      themeActiveSetting: 'theme/activeSetting',
    }),
    ...mapState('vxadmin/theme', ['activeName']),
  },

  created() {
    this.getImg();
  },
  mounted() {
    this.$nextTick(() => {
      window.createPwdObject(this);
    });

    this.timeInterval = setInterval(() => {
      this.refreshTime();
    }, 1000);

    // 二维码生成
    // this.$refs['qrcode'] = new QRCode('qrcode', {
    //   text: 'http://118.144.87.46/pkgs/entweb/dist/#/login?redirect=%2Findex',
    //   width: 150, // 图像宽度
    //   height: 150, // 图像高度
    //   colorDark: '#000000', // 前景色
    //   colorLight: '#ffffff', // 背景色
    //   typeNumber: 4,
    //   correctLevel: QRCode.CorrectLevel.H, // 容错级别 容错级别有：（1）QRCode.CorrectLevel.L （2）QRCode.CorrectLevel.M （3）QRCode.CorrectLevel.Q （4）QRCode.CorrectLevel.H
    // });
  },
  beforeDestroy() {
    clearInterval(this.timeInterval);
  },
  methods: {
    demonstration() {
      this.login({
        vm: this,
        username: this.formLogin.username,
        password: 'asdasd',
      }).then(() => {
        this.getLoginInfo().then(() => {
          // 重定向对象不存在则返回顶层路径
          this.$router.replace('/index').catch((err) => {
            console.log(err);
          });
        });
      });
    },
    ...mapActions('vxadmin/account', ['login']),
    Refresh() {
      // ukey插入刷新
      judgeOneEnv(this).then((res) => {
        this.shield = res;
      });
    },
    refreshTime() {
      this.time = dayjs().format('HH:mm:ss');
    },
    // 电子回单校验
    receiptVerify() {
      this.goto({ name: 'receiptVerify' });
    },
    // 专业版登陆
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          //  密码控件获取 已输入的密文
          window.getPassInput(this.pwdObj[0], new Date().getTime(), '登陆密码', async (val) => {
            if (val.password) {
              this.login({
                vm: this,
                username: this.formLogin.username,
                password: val.password,
              }).then(() => {
                this.getLoginInfo().then(() => {
                  // 重定向对象不存在则返回顶层路径
                  this.$router.replace('/index').catch((err) => {
                    console.log(err);
                  });
                });
              });
              this.pwdErrorR = val.error;
            } else if (val.error) {
              this.pwdErrorR = val.error;
            }
          });
        }
      });
    },
    // 获取验证码图片
    getImg() {
      // 发接口拿到文件流，
      // let blob = new Blob([res], { type: 'image/jpg' });
      // let url = window.URL.createObjectURL(blob);
      // this.imgSrc = url;
    },
    // 验证ukey密码
    verification() {
      verifyPIN(this, this.ukeyValue).then((res) => {
        if (res) {
          usbKeySignData(this, { loanInfo: this.loanInfo }).then(async () => {
            // ukey校验成功后请求接口
            try {
              // 加载loading开启
              this.isLoading = true;
              this.goto({ name: 'forgetPass' });
            } catch (error) {
              this.$message.error(error.message);
            } finally {
              // 加载loading关闭
              this.isLoading = false;
            }
          });
        }
      });
    },
    goToDownloadCentre() {
      this.$router.push({
        name: 'downloadCentre',
      });
    },
    // 获取用户登录信息
    async getLoginInfo() {
      try {
        const res = await loginInfoApi.getCompanyLoginInfo({});
        localStorage.setItem('loginInfo', JSON.stringify(res.List));
      } catch (error) {
        this.$message.error(error.message);
      }
    },
  },
};
</script>

<style lang="scss">
.page-login-zyl {
  @extend %unable-select;
  img {
    width: auto;
    height: auto;
  }
  $backgroundColor: #fff;
  background: $backgroundColor;
  color: rgba(51, 51, 51, 1);
  // min-width: 1366px;
  height: 100%;
  background: #f7f8ff;
  max-width: 100%;
  .flex-center {
    align-items: center;
    display: flex;
    justify-content: center;
  }
  // 头部样式
  .page-login-header {
    height: 60px;
    width: 100%;
    // background: linear-gradient(180deg, #4072ee, #3457dd);
    // box-shadow: 0px 1px 4px 0px rgba(12, 32, 79, 0.11);
    background: $color-bg-gradient;

    overflow: hidden;
    .login-header-center {
      width: 75%;
      margin: 0 auto;
      height: 60px;
      line-height: 60px;
      display: flex;
      justify-content: space-between;
      // padding: 0 133px;
      .header-center-left {
        width: 400px;
        img {
          width: 170px;
          height: 26px;
          vertical-align: middle;
        }
        span {
          width: 72px;
          height: 25px;
          display: inline-block;
          font-size: $s18;
          font-weight: 600;
          text-align: left;
          color: $color-text-primary;
          line-height: 25px;
          margin-left: 28px;
        }
      }
      .header-center-right {
        display: flex;

        height: 100%;
        div {
          display: flex;
          align-items: center;
          img {
            width: 30px;
            height: 30px;
          }
          ui-link {
            height: 21px;
            line-height: 21px;
            margin: 0 15px;
            font-size: $s16;
            color: $color-text-primary;
          }
          a {
            margin: 0 10px;
            color: $color-text-primary;
            // &:hover {
            /*color: #ea6121;*/
            // }
          }
        }
      }
    }
  }
  // 主体样式
  .page-login-body {
    width: 100%;
    // height: 480px;
    height: 628.5px;
    position: relative;
    background: url('~@/assets/image/login/loginBackground.png') no-repeat center;
    background-size: cover;
    .login-body-center {
      width: 1200px;
      height: 100%;
      margin: 0 auto;
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .body-center-left {
        color: $color-text-primary;
        .large {
          font-size: 51px;
          line-height: 67.5px;
          font-family: AliHYAiHei;
          margin-bottom: 46.5px;
        }
        .intro {
          font-size: 27px;
          font-family: SourceHanSansCN, SourceHanSansCN-Medium;
          font-weight: 500;
          line-height: 40.5px;
        }
      }
      .body-center-right {
        box-sizing: border-box;
        background: $color-bg-default;
        background: $color-bg-default;
        background-size: 100% 100%;
        border-radius: 8px;
        overflow: hidden;
        .login-box {
          width: 100%;
          height: 100%;
          padding: 20px;
          box-sizing: border-box;
          background: url('~@/assets/image/login/loginBg.png') no-repeat;
          background-size: 50%;
          background-position-x: right;
          .title {
            font-size: 22.5px;
            font-weight: 300;
            text-align: center;
            color: #b1b6ce;
            line-height: 30.75px;
            margin-bottom: 7.5px;
          }
          .titletype {
            font-size: 13.5px;
            font-weight: 600;
            text-align: center;
            color: $color-text-hover;
            line-height: 18.75px;
          }
          .no-down {
            .nocontrol {
              width: 232.75px;
              height: 153px;
              background: $color-bg;
              border-radius: 4px;
              margin: 0 auto;
              margin-top: 45px;
              box-sizing: border-box;
              padding: 22.5px;

              .warn {
                font-size: $s12;
                img {
                  width: 17.25px;
                  margin-right: 4px;
                }
              }
              p {
                margin: 22.75px 0;
                font-size: $s12;
                text-align: center;
                color: $color-text-sub;
                line-height: 15px;
              }
              .ref {
                width: 16.5px;
                margin: 0 auto;
              }
            }
            .havedown {
              color: $color-text-hover;
              text-decoration: revert;
              float: right;
              font-size: $s12;
              margin-top: 22.75px;
            }
            a {
              color: $color-text-hover;
              text-decoration: revert;
            }
          }
          .u-shield {
            text-align: center;
            padding-top: 30px;
            .tips {
              color: $color-text-main;
              font-size: $s12;
            }
            .shieldimg {
              width: 135px;
              margin: 0 auto;
              img {
                width: 100%;
              }
              margin: 0 auto;
              margin-top: 15px;
              margin-bottom: 30px;
            }
            .ref {
              span {
                font-size: $s12;
                color: $color-text-hover;
              }
              img {
                width: 17.25px;
                margin-left: 7.5px;
              }
            }
          }
          .login {
            /*margin-top: 22.75px;*/
            padding: 17.5px;
            box-sizing: border-box;
            .userinfo {
              font-size: $s16;
              color: $color-text-main;
              margin-bottom: 20px;
            }
            .line {
              width: 100%;
              height: 1px;
              background: #e4e7ed;
            }
            .infoEnter {
              display: flex;
              position: relative;
              padding-top: 17.25px;
              align-items: center;
              .ui-input__inner {
                border: none;
              }
              img {
                width: 24px;
                height: 24px;
              }
              .idfcode {
                width: 60%;
              }
              .code-img {
                position: absolute;
                left: 73%;
                width: 60px;
                height: 18px;
              }
            }
            .loginbtn {
              background: $color-bg-btn-primary;
              border-radius: 8px;
              color: $color-text-primary;
              width: 100%;
              height: 37.5px;
              text-align: center;
              line-height: 18px;
              padding: 0;
              margin-top: 20px;
            }
          }
        }
        .ui-button--primary:hover,
        .ui-button:hover {
          background: #ea6121;
          color: $color-text-primary;
        }
        .ui-tabs--border-card {
          background: transparent;
          border: none;
          .ui-tabs__header {
            background: transparent;
            border: none;
            .ui-tabs__item.is-active {
              background: transparent;
              border: none;
            }
          }
        }
        .ui-tabs--border-card {
          border: 0;
          height: 100%;
          .ui-tabs__nav {
            height: 50px;
            width: 100%;
            display: flex;
            align-items: center;
            .ui-tabs__item {
              flex: 1;
              font-size: $s18;
              text-align: center;
              height: 50px;
              line-height: 50px;
              margin-bottom: -1px;
              color: rgba(102, 102, 102, 1);
              &.is-active {
                color: rgba(0, 182, 114, 1);
              }
              &:hover {
                color: rgba(0, 182, 114, 1);
              }
            }
          }
          .ui-tabs__content {
            padding: 0 40px;
            padding-bottom: 20px;
            .ui-tabs__nav {
              .ui-tabs__item {
                font-size: $s16;
              }
              .ui-tabs__active-bar {
                background: rgba(0, 182, 114, 1);
              }
            }
            .ui-tabs__header {
              margin-bottom: 14px;
              .ui-tabs__nav-wrap::after {
                height: 0;
              }
            }
            .ui-tabs__content {
              padding: 0;
              .ui-card {
                border: 0;
                .ui-card__body {
                  padding: 0;
                }
              }
            }
          }
        }
      }
    }
    .login-body-btns {
      width: 100%;
      height: 70px;
      opacity: 0.25;
      background: $color-bg-default;
      position: absolute;
      bottom: 0;
    }
    .btn-center {
      position: absolute;
      bottom: 0;
      z-index: 3;
      width: 62.5%;
      height: 70px;
      margin: 0 auto;
      display: flex;
      left: 18.4%;
      .border {
        background: $color-bg-default;
        height: 100%;
        width: 1px;
      }
      .bottom-btn {
        width: 24%;
        height: 100%;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: $s20;
        cursor: pointer;
        img {
          width: 35px;
        }
        span {
          color: $color-text-primary;
          margin-left: 17.25px;
          text-shadow: 0px 2px 10px 0px rgba(63, 63, 63, 0.5);
        }
      }
    }
  }

  .introduction {
    width: 1200px;
    margin: 0 auto;
    padding-top: 45px;
    .intro-down {
      display: flex;
      justify-content: space-around;
      width: 100%;
      p {
        color: $color-text-sub;
        font-size: $s12;
        margin: 15px 0 21px 0;
      }
      .down-title {
        color: $color-text-main;
        font-size: 21px;
        width: 180px;
        padding: 35px 0;
        div {
          font-size: $s14;
          color: $color-text-primary;
          background: $color-bg-btn-primary;
          border-radius: 6px;
          box-shadow: 0px 2px 10px 0px rgba(82, 86, 166, 0.5);
          width: 110px;
          height: 36px;
          padding: 8px;
          box-sizing: border-box;
          padding-left: 15px;
          img {
            width: 15px;
            margin-left: 4px;
          }
        }
      }
      .intro-down-left,
      .intro-down-right {
        width: 450px;
        display: flex;
        img {
          width: 270px;
        }
      }
      .intro-down-right {
        img {
          width: 208px;
        }
        .down-title {
          margin-left: 20px;
        }
      }
    }

    /*阴影文字部分*/
    .shoadow-text {
      text-align: center;
      margin: 64px 0 30px 0;
      .text {
        position: relative;
        height: 70px;
        width: 100%;
        .top {
          font-size: 37.5px;
        }
        .bottom {
          opacity: 0.1;
          font-size: 32px;
          font-weight: 600;
          color: #394f98;
          letter-spacing: 2px;
          position: absolute;
          bottom: 0;
          width: 100%;
        }
      }
      .shoadow {
        font-size: 15px;
        color: $color-text-sub;
        display: flex;
        align-items: center;
        justify-content: center;
        span {
          margin: 0 9px;
        }
        div {
          width: 94px;
          height: 3px;
          opacity: 0.3;
          background: linear-gradient(90deg, #eeeeee 3%, #999999);
          border-radius: 100px 100px 0px;
        }
        .last {
          background: linear-gradient(-90deg, #eeeeee 3%, #999999);
        }
      }
    }
    .shoadow-text2 {
      margin: 75px 0 46px 0;
    }

    .centerbg {
      display: flex;
      justify-content: center;
      margin-bottom: 81.75px;
      .bg1 {
        background: url('~@/assets/image/login/cbg1.png') no-repeat 100%;
        .title,
        .title-c {
          color: #936430;
        }
      }
      .bg2 {
        background: url('~@/assets/image/login/cbg2.png') no-repeat 100%;
        margin: 0 30px;
        .title,
        .title-c {
          color: #5256a6;
        }
      }
      .bg3 {
        background: url('~@/assets/image/login/cbg3.png') no-repeat 100%;
        .title,
        .title-c {
          color: #936430;
        }
      }
      .bg {
        width: 280.5px;
        height: 297.75px;
        background-size: contain;
        padding: 26.25px 0 30.75px 35.25px;
        box-sizing: border-box;
        .title {
          font-size: 27px;
        }
        .title-c {
          font-size: 15px;
          margin: 9.75px 0 37.5px 0;
        }
        .logoclass-child {
          display: flex;
          align-items: center;
          img {
            width: 35.25px;
          }
          span {
            color: #473b2e;
            font-size: $s18;
            margin-left: 16.5px;
          }
        }
        .logoclass-child:not(:last-child) {
          margin-bottom: 21.75px;
        }
      }
    }
  }
  .openAc {
    width: 100%;
    height: 985.5px;
    .bg {
      width: 100%;
      /*height: 495px;*/
      background: url('~@/assets/image/login/openAcBg.png') no-repeat;
      background-size: 100%;
      .tel {
        padding-top: 111px;
        width: 40%;
        margin: 0 30%;
        text-align: center;
        .flone {
          font-size: 37.5px;
          font-weight: 600;
          color: $color-text-primary;
        }
        .fltwo {
          opacity: 0.25;
          font-size: 31.5px;
          font-weight: 600;
          color: $color-text-primary;
          line-height: 44.25px;
          letter-spacing: 1px;
        }
        .flthree {
          width: 270px;
          height: 63px;
          background: $color-bg-default;
          border-radius: 32px;
          box-shadow: 0px 5px 13px 0px rgba(82, 86, 166, 0.5);
          margin: 15px auto 0;
          justify-content: center;
          align-items: center;
          img {
            width: 32px;
            margin-right: 9px;
          }
          span {
            font-size: 26px;
            font-weight: 600;
            color: $color-text-hover;
            line-height: 36px;
            letter-spacing: 1px;
          }
        }
      }
      .openstep {
        width: 1100px;
        height: 450px;
        margin: 0 auto;
        margin-top: 72px;
        background: $color-bg-default;
        border-radius: 14px;
        box-shadow: 0px 0px 20px 0px rgba(205, 205, 205, 0.4);
        padding: 64.5px 100px 0 117px;
        box-sizing: border-box;
        position: relative;
        .title {
          font-size: 30px;
          font-weight: 600;
          color: $color-text-hover;
          line-height: 42px;
          text-align: center;
          margin-bottom: 44px;
        }
        .Semicircle {
          position: absolute;
          bottom: 0;
          width: 360px;
          background: url('~@/assets/image/login/semiCircle.png') no-repeat;
          background-size: contain;
          .circular {
            width: 241.5px;
            height: 241.5px;
            background: $color-bg-default;
            box-shadow: 0px 10px 56px 0px rgba(205, 205, 205, 0.3);
            border-radius: 50%;
            margin: 0 auto;
            margin-top: 40px;

            .center div:nth-child(1) {
              font-size: 27.75px;
              font-weight: 600;
              text-align: center;
              color: $color-text-main;
              line-height: 39px;
              margin-bottom: 15.75px;
              box-sizing: border-box;
            }
            .center div:nth-child(2) {
              font-size: $s18;
              font-weight: 500;
              text-align: center;
              color: $color-text-sub;
              line-height: 27px;
            }
          }
        }
        .cir-p {
          position: absolute;
          left: 50%;
          bottom: -68px;
          width: 360px;
          margin-left: -180px;
          height: 286px;
          .step {
            position: absolute;
            width: 146px;
            span {
              font-size: 19.5px;
              font-weight: 500;
              text-align: left;
              color: $color-text-main;
              line-height: 29.25px;
            }
            img {
              width: 48.75px;
            }
          }
          .step1 {
            bottom: 90px;
            right: 50%;
            margin-right: 155px;
            img {
              margin-left: 18px;
            }
          }
          .step2 {
            top: 35px;
            right: 50%;
            margin-right: 110px;
            img {
              margin-left: 18px;
            }
          }
          .step3 {
            top: -65px;
            left: 50%;
            margin-left: -78px;
            flex-direction: column;
            img {
              margin-top: 11.25px;
            }
          }
          .step4 {
            top: 35px;
            left: 50%;
            margin-left: 105px;
            img {
              margin-right: 18px;
            }
          }
          .step5 {
            bottom: 90px;
            left: 50%;
            margin-left: 155px;
            img {
              margin-right: 18px;
            }
            div {
              font-size: 19.5px;
              font-weight: 500;
              text-align: left;
              color: $color-text-main;
              line-height: 29.25px;
            }
          }
        }
      }
    }
  }
}

、
// 登录按钮
.page-login-zyl .button-login {
  width: 100%;
  height: 40px;
  font-size: 15px;
  background: rgba(0, 182, 114, 1);
  border-color: rgba(0, 182, 114, 1);
  border-radius: 2px;
  color: $color-text-primary;
  outline: 0;
  margin-top: 4px;
}

/* 按钮点击样式 */
.page-login-zyl .button-login:active {
  background: #ea6121;
  border-color: #ea6121;
}
.page-login-zyl .vx-pwd-con input:focus .vx-pwd,
.page-login-zyl .ui-input__inner:focus {
  border-color: #ea6121;
}

// 密码控件样式微调
.page-login-zyl .vx-pwd-con {
  position: relative;
  margin-left: 0 !important;
  padding-left: 15px;
  font-size: $s14;
  a {
    color: #ea6121;
  }
}
.page-login-zyl .vx-pwd-con > object {
  width: 247px !important;
  height: 38px !important;
}
.page-login-zyl .vx-pwd-con > input {
  outline: none;
  position: absolute;
  top: 0px;
  right: 6px;
  width: 242px !important;
  height: 38px !important;
  border-radius: 4px;
  box-sizing: border-box;
  vertical-align: middle;
  z-index: 3;
}
.page-login-zyl .vx-pwd {
  box-sizing: border-box;
  width: 280px;
}
.page-login-zyl .vx-pwd img {
  top: 50%;
  transform: translateY(-50%);
}
.page-login-zyl .vx-pwd,
.page-login-zyl .ui-form-item {
  margin-bottom: 0px !important;
}
.page-login-zyl .login-custon-zyl .vx-pwd,
.page-login-zyl .login-custon-zyl .ui-form-item {
  margin-bottom: 12px !important;
}

.page-login-zyl .login-custon-zyl .button-login {
  margin-top: 8px;
}
.page-login-zyl .ui-form-item__error {
  padding-top: 5px;
  padding-left: 13px;
}
.page-login-zyl .domain-btn {
  margin-bottom: 20px;
  width: 100%;
  background: linear-gradient(to right, #eb6120, #f6ab00);
  border-radius: 4px;
  border: none;
}
// 专业版
.page-login-zyl .domain-zyl {
  .ui-tabs__nav-scroll {
    text-align: center;
    .ui-tabs__nav {
      float: inherit;
    }
  }
  .ui-card {
    border: none;
    background: transparent;
  }
}
.imgIcon {
  vertical-align: middle;
}
.page-login-zyl .footer-copyright {
  height: 30px;
  background: rgba(51, 51, 51, 1);
  font-size: 13px;
  color: rgba(187, 187, 187, 1);
  line-height: 30px;
  text-align: center;
}
input::placeholder {
  color: $color-text-placeholder;
  font-size: $s14;
}
// ui-popover气泡弹框
.ui-popover {
  .img-container {
    .inner-img {
      width: 180px;
      height: 100px;
    }
    .img-txt {
      padding-left: 50px;
    }
  }
}
</style>
